<template>
  <a-layout-sider
    class="layout-sider"
    :class="['side-menu', 'beauty-scroll']"
    :width="260"
  >
    <i-menu
      :collapsed="collapsed"
      :options="menuData"
      :theme="theme"
      class="menu"
      @select="onSelect"
    />
  </a-layout-sider>
</template>

<script>
import IMenu from "./menu";
export default {
  name: "SideMenu",
  components: { IMenu },
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false,
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    menuData: {
      type: Array,
      required: true,
    },
    theme: {
      type: String,
      required: false,
      default: "dark",
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    onSelect(obj) {
      this.$emit("menuSelect", obj);
    },
  },
};
</script>

<style lang="less" scoped>
@import "index";
.layout-sider {
  margin-bottom: -48px;
  padding: 10px;
  background: url("~@/assets/img/layout/layout-side-bg.png") no-repeat bottom /
    95% 100%;
  background-color: transparent;
  overflow: auto;
}
</style>
